import React from "react";
import { Row, Col, Form, Input, Button, Typography, Select } from "antd";
import * as echarts from "echarts";
import { useEffect } from "react";
import { useRef } from "react";
import Data from "./../../mobx/data";
import { observer } from "mobx-react";
import { roleList } from "../../utils";

const { Title } = Typography;

function UserData() {
  const { userList, getUserListAsync } = Data;

  useEffect(() => {
    chartInitOne();
    getUserListAsync({});
    setTimeout(() => {
      chartInitTwo();
    }, 1000);
  }, []);
  const chartOne: any = useRef();
  const chartTwo: any = useRef();

  const chartInitTwo = () => {
    var myChart = echarts.init(chartTwo.current);
    var data = userList.map((item: any) => {
      // item.name = item.text;
      item.value = userList.filter((v: any) => v.role == item.id).length;
      return item;
    });
    console.log(data);
    // var option = {
    //   tooltip: {
    //     trigger: "item",
    //   },
    //   legend: {
    //     top: "5%",
    //     left: "center",
    //   },
    //   series: [
    //     {
    //       name: "人员比例",
    //       type: "pie",
    //       radius: ["40%", "70%"],
    //       avoidLabelOverlap: false,
    //       itemStyle: {
    //         borderRadius: 10,
    //         borderColor: "#fff",
    //         borderWidth: 2,
    //       },
    //       label: {
    //         show: false,
    //         position: "center",
    //       },
    //       emphasis: {
    //         label: {
    //           show: false,
    //           fontSize: "40",
    //           fontWeight: "bold",
    //         },
    //       },
    //       labelLine: {
    //         show: true,
    //       },
    //       data: data,
    //     },
    //   ],
    // };

    var option = {
      title: {
        // text: "WH2114迟到分析",
        // text: data.username,
        subtext: "迟到人数分析",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "迟到人员占比",
          type: "pie",
          radius: "50%",
          data: [
            { value: 240, name: "小丽" },
            { value: 200, name: "小海" },
            { value: 360, name: "小花" },
            { value: 100, name: "小佐" },
            { value: 144, name: "小拉" },
            { value: 240, name: "小明" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    myChart.setOption(option);
  };

  const chartInitOne = () => {
    var myChart = echarts.init(chartOne.current);

    // 指定图表的配置项和数据  参数配置项
    var option = {
      title: {
        text: "WH2114 迟到人数",
      },
      tooltip: {},
      legend: {
        data: ["次数"],
      },
      xAxis: {
        type: "category",
        data: ["小丽", "小海", "小花", "小佐", "小拉", "小明"],
      },
      yAxis: {},
      series: [
        {
          name: "次数",
          showBackground: true,
          type: "bar",
          data: [240, 200, 360, 100, 144, 240],
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  };

  return (
    <div>
      <Title level={2}> 用户数据分析 </Title>
      <Row>
        <Col span={11} offset={0}>
          <div
            className="ebox"
            ref={chartOne}
            style={{
              padding: 12,
              width: "100%",
              height: 440,
              border: "1px solid #ddd",
              borderRadius: "10px",
            }}
            id="chartone"
          ></div>
        </Col>
        <Col span={11} offset={1}>
          <div
            className="ebox"
            ref={chartTwo}
            style={{
              padding: 12,
              width: "100%",
              height: 440,
              border: "1px solid #ddd",
              borderRadius: "10px",
            }}
            id="charttwo"
          ></div>
        </Col>
      </Row>
    </div>
  );
}

export default observer(UserData);
